<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章列表</title>
    <script src="js/axios.min.js"></script>
    <script src="js/vue-2.6.10.js"></script>
</head>
<body>
<div id="app">
    <h2>文章列表----{{msg}}</h2>
    <table border="1" cellpadding="1" cellspacing="0" style="text-align: center">
        <thead>
        <tr>
            <td>文章编号</td>
            <td>标题</td>
            <td>作者编号</td>
            <td>发表日期</td>
            <td>审核状态</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="article in articles" >
            <td>{{article.id}}</td>
            <td>{{article.title}}</td>
            <td>{{article.authorid}}</td>
            <td>{{article.createtime}}</td>
            <td>
                <span v-if="article.state=='1'">审核通过</span>
                <span v-else-if="article.state=='2'">审核未通过</span>
                <span v-else>未审核</span>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            articles:[],
            msg: ''
        },
        methods:{
            setMsg(msg){
                this.msg=msg;
            }

        },
        created(){ //页面加载完成就调用
            axios.get("http://localhost:8000/api/article/findAll").then(res => {
                this.articles = res.data;
        });
        }
    });


    //@mouseover="setMsg(article.title)" @mouseout="setMsg('')"

</script>
</body>
</html>